export component Mask {
    // background default is gray 0.3
    in property <brush> background: #8080804d;
    in property <MouseCursor> mouse_cursor <=> touch.mouse_cursor;
    in-out property <bool> show;
    in property <bool> on_click_close: true;

    width: 100%;
    height: 100%;
    visible: show;

    callback clicked;

    Rectangle {
        width: root.width;
        height: root.height;
        background: background;
    }

    touch:= TouchArea {
        clicked => {
            clicked();
            if on_click_close {
                show = false;
            }
        }
    }

    public function open() {
        show = true;
    }

    public function close() {
        show = false;
    }
}